<template>
  <div class="portal-list">
    <div class="protlet-title">
      <span>请选择组件</span>
      <close-outlined @click="ps_close" />
    </div>
    <div class="portal-list-body">
      <!--复用组件管理页面-->
      <portletMana :i-am-component="true" @i-am-component-click="clickPortletSelect"></portletMana>
      <portParams v-if="ischeckitem" :checkitem="checkitem" @portlet-selected="evt_portletSelected"></portParams>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref, toRefs, defineProps, nextTick } from 'vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import portletMana from './portlet-manage'
import portParams from './portParams'

const props = defineProps({
  menuList: {
    type: Array,
    default: () => {
      return {}
    },
  },
  parentInfo: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const { menuList, parentInfo } = toRefs(props)

const checkitem = ref({})
const ischeckitem = ref(true)
const emit = defineEmits(['portlet-selected', 'evt_ps_close'])
const clickPortletSelect = (item) => {
  item.params = parentInfo.value
  checkitem.value = item
}
const evt_portletSelected = (item) => {
  ischeckitem.value = false
  nextTick(() => {
    ischeckitem.value = true
  })
  let { html, imageParams, params, resourcePath, id } = item
  menuList.value.portlets.push({ html, imageParams, params, resourcePath, id })
  emit('portlet-selected', '')
  checkitem.value = {}
}
const ps_close = () => {
  emit('evt_ps_close', '')
}
</script>

<style scoped lang="less">
.portal-list {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  //border: 1px solid #8c8c8c;
  user-select: none;

  .protlet-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 15px;
    font-weight: bolder;
    font-size: 18px;

    span:nth-child(2) {
      cursor: pointer;
    }
  }

  .portal-list-body {
    display: flex;
    box-sizing: border-box;
    height: calc(100% - 40px);
    overflow: auto;
  }
}
</style>
